<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <tool-bar @search="$refs.table.refresh(true)"
                @reset="() => { (this.queryParam = {}), $refs.table.refresh(true); }">
                <template slot="toolBtn" slot-scope="scope">
                    <a-button class="cu-btn-primary" icon="plus" @click="handleAdd()">新建</a-button>
                </template>
                <template slot="toolForm">
                    <a-form-item label="事件名称">
                        <a-input v-model="queryParam.name" placeholder="请输入事件名称" />
                    </a-form-item>
                </template>
            </tool-bar>
            <DataGrid ref="table" :columns="columns" :url="url" :queryParam="queryParam" rowKey="uuid"
                :showRowSelect="false">
                <span slot="renderSecrecy" slot-scope="{ text, record }">
                    <a-tag :color="tagColors[text]">
						{{ text | filteSecrecy }}
					</a-tag>
                </span>
                <span slot="renderAction" slot-scope="{ text, record }">
                    <a @click="() => handleEdit(record)">编辑</a>
                    <span class="action-margin"></span>
                    <a @click="() => handleSub(record)" class="action-delete">删除</a>
                </span>
            </DataGrid>
            <edit-form
                ref="createModal" 
                :visible="visible" 
                :loading="confirmLoading" 
                :model="mdl" 
                @cancel="handleCancel()"
                @ok="handleOk()" 
            />
        </div>
    </div>
</template>

<!--script-->
<script>
//数据表格组件
import {
    DataGrid,
} from "@/components";
//方法封装
import { dataGridMixin } from "@/mixins/dataGridMixin";
//新增编辑界面
import editForm from "./edit.vue";
export default {
    name: "Table",
    components: {
        editForm,
        DataGrid,
    },
    mixins: [dataGridMixin],
    filters: {
        filteSecrecy(secrecy) {
            const secrecyMap = {
                "userConfidentiality.03": "公开",
                "userConfidentiality.06": "内部",
                "userConfidentiality.04": "秘密",
            };
            return secrecyMap[secrecy];
        },
    },
    data() {
        return {
            tagColors: {
                'userConfidentiality.03': 'green',
                'userConfidentiality.06': 'orange',
                'userConfidentiality.04': 'red',
            },
            columns: [
                {
                    title: "事件名称",
                    align: "center",
                    width: "auto",
                    dataIndex: "name"
                },
                {
                    title: "事件详情",
                    align: "center",
                    width: "auto",
                    dataIndex: "sex"
                },
                {
                    title: "密级",
                    align: "center",
                    width: "auto",
                    dataIndex: "selectSecrecyField",
                    scopedSlots: { customRender: "renderSecrecy" }
                },
                {
                    title: "事件备注",
                    align: "center",
                    width: "auto",
                    dataIndex: "testCombobox"
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    width: 150,
                    scopedSlots: { customRender: "renderAction" }
                }
            ],
            visible: false,
            visibleFile: false,
            confirmLoading: false,
            mdl: null,
            // 查询参数
            queryParam: {},
            url: {
                getPageSet: '/system/exampleSingleDatagrid/getPageSet',
                save: '/system/exampleSingleDatagrid/save',
                update: '/system/exampleSingleDatagrid/update',
                deleteBatch: '/system/exampleSingleDatagrid/deleteBatch'
            }
        };
    },
    methods: {
        handleOk() {
            const form = this.$refs.createModal.form;
            this.confirmLoading = true;
            let url = '';
            form.validateFields((errors, values) => {
                // 循环拆分表单内是否存在了upload文件
                let params = values;
                let fileList = values.testDate.fileList ? values.testDate.fileList : [];
                fileList = fileList?.map(obj => {
                    const { response, ...rest } = obj;
                    return rest;
                });
                params['testDate'] = JSON.stringify(fileList);
                if (!errors) {
                    if (values.uuid) {
                        url = this.url.update;
                    } else {
                        url = this.url.save;
                    }
                    this.$post(url, params).then((res) => {
                        if (res.statusCode === 200 || res === 1) {
                            this.$refs.table.rows = null;
                            this.$refs.table.rowKeys = null;
                            this.visible = false;
                            if (this.fetch) {
                                this.fetch(this.queryParam);
                            } else {
                                this.$refs.table.refresh();
                            }
                            this.$message.success(res.message || this.$ct("operationSucceeded","操作成功"), 1.5);
                        } else {
                            this.$message.error(res.message || this.$ct("operationFailed","操作失败"), 1.5);
                        }
                    }).finally(() => {
                        this.confirmLoading = false;
                    })
                } else {
                    this.confirmLoading = false;
                }
            })
        }
    }
};
</script>

<!--style-->
<style scoped lang="less">
.table {
    background-color: @base-bg-color;
    padding: 24px;
}

/deep/.ant-btn-link {
    border: none !important;
}
</style>
